<!DOCTYPE html>
<html>
<head lang="en">
    <title>设备监控 - 监控设备</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/cwp/favicon.ico" type="image/x-icon" />
    <!--引入CSS文件-->
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/components-css/list.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/components-css/btn.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/components-css/taqs.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/components-css/panel.css"  />
    <link rel="stylesheet" type="text/css" href="../../../assets/lib/zTree/css/metroStyle/metroStyle.css"/>

    <!--引入bootstrap CSS文件-->
    <link rel="stylesheet" type="text/css" href="../../../assets/lib/bootstrap-3.3.5-dist/css/bootstrapModel.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/lib/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css"/>

    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/smartSecurity/device.css"/>
    <link rel="stylesheet" type="text/css" href="../../../assets/css/smartSecurity/deviceMenu.css"/>
    <link rel="stylesheet" type="text/css" href="../../../assets/css/smartSecurity/deviceAir.css"/>
    <style>
    #buildWater{
        background:#f0f0f0;
    }
    #buildWater label{
        margin:0;
        height:30px;
        line-height:30px;
    }
    .floor-out{
        position: absolute;
        left:10px;
    }
   /*  #waterArrow{
       position:absolute;
       left:15%;
       top:40%;
       z-index:2000;
   } 
    #buildWater .mapName{
        position: absolute;
        color:#3291d1;
        font-size:18px;
        font-weight: bold;
        left:35%;
        width:100px;
        text-align:center;
        margin:0 0 0 -50px;
        top:56%;
        z-index:4;
    }*/
    #waterDegree{
        position: absolute;
        top:10px;
        right:50px;
    }
    #waterDegree li{
        display: inline-block;
        border:2px solid #3291d1;
        padding:0 10px;
        margin:0 5px;
    }
    #floor-list{
        position:relative;
    }
    .waterImg{
        text-align: center;
    }
    .waterImg h4{
        font-size:16px;
    }
    .waterImg .left,.waterImg .right{
        width:50%;
        float:left;
    }
    .waterImg img{
        width:100%;
    }
    .waterMain{
        height:100%;
        min-width:560px;
        padding:60px 0 0;
    }
    .waterMain .waterLeft,.waterMain .waterRight{
        width:50%;
        float:left;
        overflow:hidden;
        min-width:280px;
    }
    #waterDetail1 li,#waterDetail2 li{
        height:30px;
        line-height:30px;
        width:100%;
        padding-left:20px;
    }
    #deviceToolLi li input{
        width:100px;
    }
    #deviceToolLi .textLabel,#waterDetailTH1 .textLabel,#waterDetailTH2 .textLabel{
        width:100px;
        text-align:right;
    }
    #buildWater #deviceToolLi{
        padding:20px 0;
        margin:0;
    }
    .parameter,#waterDetailTH1,#waterDetailTH2{
        width:280px;
        margin:0 auto;
    }
    #waterDetailTH1,#waterDetailTH2{
        width:240px;
    }
    #buildWater .shipin{
        width:5%;
    }
    </style>
</head>
<body>

<!--头部文件 开始-->
<div id="header" class="hide"></div>
<!--头部文件 结束-->


<!--主要内容开始-->
<div class="wrapper">
    <!--左侧菜单 开始-->
    <div id="left-menu"></div>
    <div class="center_td">
        <!--右边菜单-->
        <!--右中间-->
        <div id="left-menu-secondary">

        </div>
        <!--右右菜单-->
        <div id="right-menu-secondary" class="">
        <!-- <div class="right-container right-container-lg"> -->
            <div class="right-menu-secondary">
                <div class="menu-list-secondary">

                </div>
            </div>
        </div>
    </div>
    <!--右侧内容 开始-->
    <div class="right-container right-container-lg">
        <div class="right-scroll">
            <div class="t-list" style="width: 100%;height: 100%;">
                <!--门禁设备-->
                <div class="t-building" id="buildWater">
                    <!--设备状态-->
                    <div class="img-title">
                        <div class="clearfix mt-20">
                            <div class="clearfix item">
                                <img src="../../../assets/img/airConditioner/air4_1.png" id="normalTitleImg"><span>正常运行</span>
                            </div>
                        </div>
                        <div class="clearfix mt-20">
                            <div class="clearfix item">
                                <img src="../../../assets/img/airConditioner/air4_2.png" id="faultTitleImg"><span>设备报警</span>
                            </div>
                        </div>
                        <div class="clearfix mt-20">
                            <div class="clearfix item">
                                <img src="../../../assets/img/airConditioner/air4_3.png" id="powerTitleImg"><span>设备未开启</span>
                            </div>
                        </div>
                    </div>
                    <!-- 温度湿度 -->
                    <div class="waterDegree">
                        <ul id="waterDegree">
                        </ul>
                    </div>
                    <!-- 箭头
                    <div id="waterArrow">
                        <img src="../../../assets/img/Arrow.png" alt="" />
                    </div> -->
                    <!-- 地图 -->
                    <div class="floor-out">
                       <!--  <span class="mapName">生活给水</span> -->
                        <div id="floor-list"></div>
                    </div>
                    <!-- 设备参数 -->
                    <div class="waterMain">
                        <div class="waterImg clearfix">
                            <div class="left">
                                <img src="../../../assets/img/buildWater.png" alt="" />
                                <h4>1#生活给水</h4>
                            </div>
                            <div class="right">
                                <img src="../../../assets/img/buildWater.png" alt="" />
                                <h4>2#生活给水</h4>
                            </div>  
                        </div>
                        <div class="waterLeft">
                            <ul id="waterDetailTH1">
                            </ul>
                            <div class="parameter modal-content">
                                <ul class="t-columns-group" id="waterDetail1">
                                </ul>
                            </div>
                        </div>
                        <div class="waterRight">
                            <ul id="waterDetailTH2">
                            </ul>
                            <div class="parameter modal-content">
                                <ul class="t-columns-group" id="waterDetail2">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--工具栏-->
                    <div class="status-bar clearfix" id="deviceToolBox">
                        <img src="../../../assets/img/compass_icon.png" style="width: 36px;"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--左侧菜单 结束-->
</div>
<!--版权
<div id="copyright"></div>-->
<!--jQuery库脚本-->
<!--非IE8浏览器-->
<!--[if !(IE 8)]><!--><script type="text/javascript" src="../../../assets/lib/jquery/jquery.min.js"></script><!--<![endif]-->
<!--IE8浏览器-->
<!--[if IE 8]><script type="text/javascript" src="../../../assets/lib/jquery/jquery-ie8.min.js"></script><![endif]-->
<script type="text/javascript" src="../../../assets/lib/jQuery-slimScroll-1.3.8/jquery.slimscroll.min.js"></script>
<script src="../../../assets/common/loadHeaderAndCopyright.js"></script>
<script src="../../../assets/common/loadLeftMenuDevice.js"></script>
<script charset="utf-8" src="../../../assets/lib/tipModal/js/tipModal.js"></script>
<!--模态框-->
<script src="../../../assets/lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<!--模态提示框-->
<script src="../../../assets/common/centerModal.js"></script>
<script src="../../../assets/common/ajaxPoster.js"></script>
<script charset="utf-8" src="../../../assets/lib/artTemplate/template.js"></script>
<script src="../../../assets/common/loaderTableTmpl.js"></script>
<script src="../../../js/monitorDevices/building/buildingWater.js"></script>
<!--加载设备详情信息-->
<script type="text/html" id="deviceMenuTmpl">
    <dl><dt><span class='icon-circle-down'></span><i class='title'>{{titleName}}</i></dt>
        <div class='dd-list'>
            <div class='div-c'>
</script>
<!--加载楼层地图-->
<script type="text/html" id="mapTmpl">
    {{each beans}}
    <div class="floor-image {{$value.num | mapFormat}}" id="floor{{$value.buildingId}}">
        <img src="{{$value.num | mapImgFormat}}" alt="">
        <div class='device-coordinate-item selected' id="{{$value.buildingId}}">

        </div>
    </div>
    {{/each}}
</script>
<!--监控设备信息-->
<!-- top -->
<script type="text/html" id="deviceInfoTmplWaterTop">
    <li class="lgLi lgInp"><label>室外温度：</label><label>{{toolData.outdoorTemperature}}</label></li>
    <li class="lgLi lgInp"><label>室外湿度：</label><label>{{toolData.outdoorHumidity}}</label></li>
</script>
<!-- head -->
<script type="text/html" id="deviceInfoTmplWaterTH">
    <li><label class="textLabel">设备编号：</label><label>{{devicePositionCode}}</label></li>
    <li><label class="textLabel">设备位置：</label><label>{{devicePositionDescribe}}</label></li>
</script>
<!-- 1# -->
<script type="text/html" id="deviceInfoTmplWater1">
    <div id="deviceToolLi">
        <li><label class="textLabel">泵运行状态：</label><label><input type="text" readonly="readonly" value="{{toolData.operationStatusOf1Pump}}"></label></li>
        <li><label class="textLabel">泵故障报警：</label><label><input type="text" readonly="readonly" value="{{toolData.failureAlarmOf1Pump}}"></label></li>
        <li class="lgLi bgInp"><label class="textLabel">出水压力：</label><label><input type="text" readonly="readonly" value="{{toolData.effluentPressureOf1}}"></label></li>
    </div>
</script>
<!-- 2# -->
<script type="text/html" id="deviceInfoTmplWater2">
    <div id="deviceToolLi">
        <li><label class="textLabel">泵运行状态：</label><label><input type="text" readonly="readonly" value="{{toolData.operationStatusOf2Pump}}"></label></li>
        <li><label class="textLabel">泵故障报警：</label><label><input type="text" readonly="readonly" value="{{toolData.failureAlarmOf2Pump}}"></label></li>
        <li class="lgLi bgInp"><label class="textLabel">出水压力：</label><label><input type="text" readonly="readonly" value="{{toolData.effluentPressureOf2}}"></label></li>
    </div>
</script>
</body>
</html>